import {
  init,
  classModule,
  propsModule,
  styleModule,
  eventListenersModule,
  h,
} from "snabbdom";

const patch = init([
  // Init patch function with chosen modules
  classModule, // makes it easy to toggle classes
  propsModule, // for setting properties on DOM elements
  styleModule, // handles styling on elements with support for animations
  eventListenersModule, // attaches event listeners
]);

const container = document.getElementById("container");

const btn = document.getElementById("btn");


const vnode = h('ul', {}, [
  h('li', {key: 'a'}, 'a'),
  h('li', {key: 'b'}, 'b'),
  h('li', {key: 'c'}, 'c'),
]);


// 旧的函数
// h("div#container.two.classes", { on: { click: function() {} } }, [
//   h("span", { style: { fontWeight: "bold" } }, "This is bold"),
//   " and this is just normal text",
//   h("a", { props: { href: "/foo" } }, "I'll take you places!"),
// ]);

patch(container, vnode);

const vnode2 = h('ul', {}, [
  h('li', {key: 'b'}, 'b'),
  h('li', {key: 'c'}, 'c'),
  h('li', {key: 'a'}, 'a'),
]);
btn.onclick = function() {
  patch(vnode, vnode2);
}



// const newVnode = h(
//   "div#container.two.classes",
//   { on: { click: function() {} } },
//   [
//     h(
//       "span",
//       { style: { fontWeight: "normal", fontStyle: "italic" } },
//       "This is now italic type"
//     ),
//     " and this is still just normal text",
//     h("a", { props: { href: "/bar" } }, "I'll take you places!"),
//   ]
// );
// // Second `patch` invocation
// patch(vnode, newVnode); // Snabbdom efficiently updates the old view to the new state